Skip to content

feat: support user rank card#5629

Closed
cuzz-venus wants to merge 19 commits into
feat/prime-total-rewardsfrom
feat/prime-leaderboard-user-rank
Closed

feat: support user rank card#5629
cuzz-venus wants to merge 19 commits into
feat/prime-total-rewardsfrom
feat/prime-leaderboard-user-rank

Conversation

@cuzz-venus

@cuzz-venus cuzz-venus commented Jun 15, 2026

Copy link
Copy Markdown
Contributor

Jira ticket(s)

VPD-1332

Changes

  • add user rank card
  • update total rewards card to support rules modal

Supply on Valuts
image

Supply on Prime leaderboard
image

rules on Prime
image
image

cuzz-venus and others added 8 commits June 10, 2026 21:28
These keys belong to the leaderboard tables feature and are not referenced
on this branch, so i18next-parser prunes them. Regenerate the catalogs so
the committed translations match the parser output and CI passes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@changeset-bot

changeset-bot Bot commented Jun 15, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 941b259

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@venusprotocol/evm Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel

vercel Bot commented Jun 15, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
dapp-preview Ready Ready Preview Jun 15, 2026 2:02pm
dapp-testnet Ready Ready Preview Jun 15, 2026 2:02pm
venus.io Ready Ready Preview Jun 15, 2026 2:02pm

Request Review

@greptile-apps

greptile-apps Bot commented Jun 15, 2026

Copy link
Copy Markdown

Greptile Summary

This PR implements the user rank card for the Prime Leaderboard page, adding a RankSection that shows the user's rank, Prime score, and eligibility status when connected, or a connect-wallet prompt when not. It also introduces a LastCycleSummaryModal (wired to the "Rules" button) showing last-cycle total and user reward summaries, and refactors TotalRewardsCard/UserRewardsCard to support optional title and content props for reuse inside that modal.

  • RankCard + RankSection: Fully built with ConnectPrompt, EligibilityStatus, RankSummary, and RankActions sub-components; two new SVG icons (barChart, graduationCap) with unique IDs via useId().
  • LastCycleSummaryModal: New modal reusing existing reward cards; all data is placeholder with clear TODO comments pending API integration.
  • TotalRewardsCard / UserRewardsCard: Extended with optional title and content/showMarketActions props, remaining backward-compatible with existing callers.

Confidence Score: 4/5

Safe to merge with one caveat: the "no rewards" UI path in LastCycleSummaryModal is dead code and will need attention before API integration.

In LastCycleSummaryModal, placeholderHasRewards is hardcoded to true, making the if (!placeholderHasRewards) block permanently unreachable. The eligibility/not-eligible message content can never be assigned or rendered, and there are no tests that cover this path. When real API data is wired in, a developer will need to handle this case correctly but it has never been visually or test-verified in the current scaffolding.

apps/evm/src/pages/PrimeLeaderboard/LastCycleSummaryModal/index.tsx — the no-rewards content branch is dead code.

Important Files Changed

Filename Overview
apps/evm/src/pages/PrimeLeaderboard/LastCycleSummaryModal/index.tsx New modal for last-cycle Prime summary; the "no rewards" UI branch is dead code because placeholderHasRewards is always true, making that content permanently unreachable and untested
apps/evm/src/pages/PrimeLeaderboard/RankCard/index.tsx RankCard fully implemented with connected/disconnected states, rank/score display, and eligibility status; logic looks correct
apps/evm/src/pages/PrimeLeaderboard/RankCard/EligibilityStatus/index.tsx State machine for eligibility messages is correct; gap threshold logic and Trans interpolation look sound
apps/evm/src/pages/PrimeLeaderboard/RankSection/index.tsx Thin orchestration layer wiring auth state and the placeholder rank hook to RankCard; straightforward
apps/evm/src/pages/PrimeLeaderboard/useGetPrimeRank/index.ts Placeholder hook returning static data; clearly marked TODO for API replacement
apps/evm/src/pages/PrimeLeaderboard/RankCard/RankActions/index.tsx Stake XVS link and "Rules" button (opening LastCycleSummaryModal) wired correctly; modal is conditionally mounted
apps/evm/src/pages/PrimeLeaderboard/TotalRewardsCard/index.tsx Added optional title prop with a fallback to the default translation; clean and backward-compatible change
apps/evm/src/pages/PrimeLeaderboard/UserRewardsCard/index.tsx Added optional content and showMarketActions props to support read-only summary mode; PrimeRewardBadge extracted to shared component
apps/evm/src/components/Icon/icons/barChart.tsx Uses useId() for unique mask ID after addressing the previous review finding; SVG structure looks correct
apps/evm/src/pages/PrimeLeaderboard/PrimeRewardBadge/index.tsx Badge extracted from UserRewardsCard into a reusable component; existing hex color value carried over from original code

Reviews (2): Last reviewed commit: "feat: rank section style" | Re-trigger Greptile

Comment on lines +93 to +108
<Button
variant="secondary"
className="flex-1"
onClick={() => setIsSummaryModalOpen(true)}
>
<div className="flex items-center gap-x-2">
<Icon name="graduationCap" className="size-5" />
{t('primeLeaderboard.rankCard.rulesButton')}
</div>
</Button>
</div>
</div>

<LastCycleSummaryModal
isOpen={isSummaryModalOpen}
handleClose={() => setIsSummaryModalOpen(false)}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 "Rules" button opens Last Cycle Summary, not rules content

The button is labelled "Rules" (with a graduation-cap icon, rulesButton: "Rules" in the translation key) and the PR description explicitly mentions "support rules modal", but clicking it opens LastCycleSummaryModal, whose title is "Last Cycle Prime Summary" and which shows historical cycle reward data. A user clicking "Rules" expects to learn about Prime eligibility criteria, not see past-cycle stats — these are two distinct pieces of information. If the modal content is intentionally the rules surface, the button label and translation key should reflect that (e.g. "Last Cycle"); if a separate rules modal is planned, LastCycleSummaryModal should not be wired here yet.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Comment thread apps/evm/src/components/Icon/icons/barChart.tsx Outdated
@github-actions

github-actions Bot commented Jun 15, 2026

Copy link
Copy Markdown
Contributor

Coverage Report for ./apps/evm

Status Category Percentage Covered / Total
🔵 Lines 81.64% 48025 / 58819
🔵 Statements 81.64% 48025 / 58819
🔵 Functions 62.07% 658 / 1060
🔵 Branches 72.82% 5436 / 7464
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
apps/evm/src/components/Icon/icons/barChart.tsx 100% 50% 100% 100%
apps/evm/src/components/Icon/icons/graduationCap.tsx 100% 50% 100% 100%
apps/evm/src/components/Icon/icons/index.ts 99.04% 0% 100% 99.04% 1
apps/evm/src/containers/PrimeRank/EligibilityStatus/index.tsx 100% 91.66% 100% 100%
apps/evm/src/containers/PrimeRank/Footer/index.tsx 100% 0% 100% 100%
apps/evm/src/containers/PrimeRank/useGetPrimeRank/index.ts 100% 0% 100% 100%
apps/evm/src/containers/VaultCard/index.tsx 77.72% 69.76% 0% 77.72% 52-56, 59-61, 65, 94-96, 120-139, 210-223, 252-257, 263-266
apps/evm/src/containers/VaultCard/Simplified/index.tsx 91.39% 0% 0% 91.39% 46, 88, 90-95
apps/evm/src/pages/PrimeLeaderboard/index.tsx 100% 75% 100% 100%
apps/evm/src/pages/PrimeLeaderboard/PrimeRewardBadge/index.tsx 100% 0% 100% 100%
apps/evm/src/pages/PrimeLeaderboard/RankCard/index.tsx 100% 40% 100% 100%
apps/evm/src/pages/PrimeLeaderboard/RankCard/ConnectPrompt/index.tsx 100% 0% 100% 100%
apps/evm/src/pages/PrimeLeaderboard/RankCard/RankActions/index.tsx 100% 0% 0% 100%
apps/evm/src/pages/PrimeLeaderboard/RankCard/RankSummary/index.tsx 100% 0% 100% 100%
apps/evm/src/pages/PrimeLeaderboard/RankSection/index.tsx 93.33% 0% 0% 93.33% 19
apps/evm/src/pages/PrimeLeaderboard/RulesModal/constants.ts 100% 0% 100% 100%
apps/evm/src/pages/PrimeLeaderboard/RulesModal/index.tsx 100% 50% 100% 100%
apps/evm/src/pages/PrimeLeaderboard/StakeXvsModal/index.tsx 100% 33.33% 100% 100%
apps/evm/src/pages/PrimeLeaderboard/TotalRewardsCard/index.tsx 100% 0% 100% 100%
apps/evm/src/pages/PrimeLeaderboard/UserRewardsCard/index.tsx 100% 0% 100% 100%
Generated in workflow #13615 for commit 941b259 by the Vitest Coverage Report Action

@cuzz-venus

Copy link
Copy Markdown
Contributor Author

@greptile review again

@cuzz-venus

Copy link
Copy Markdown
Contributor Author

Superseded by #5638 (rebuilt as a clean chained PR on top of the Prime Leaderboard stack).

@cuzz-venus cuzz-venus closed this Jun 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant